<template>
  <v-ons-page>
    <v-ons-toolbar>
      <div class="left">
        <v-ons-back-button>返回</v-ons-back-button>
      </div>
      <div class="center">会员签到</div>
    </v-ons-toolbar>
    <div class="container">
      <div class="head">
        <button class="sign-btn" :class="{'sign-btn_disabled':isSigned || isSigning}" ref="signBtn" :disabled="isSigned || isSigning" @click="sign">{{isSigned ? '今日已签到' : (isSigning ? '正 在 签 到' : '立 即 签 到')}}</button>
        <p>今日已签到，获得积分5分</p>
      </div>
      <vue-better-calendar class="calendar" ref="calendar" mode="sign" :showLunar="false" :showDisableDate="true" :signed-dates="signedDates" @select-sign-date="selectSign" :sign-success-txt="'会员签到成功，获取5积分'"></vue-better-calendar>
    </div>
  </v-ons-page>
</template>

<script>
  export default {
    data() {
      return {
        selectToPageEditor: false,
        selectedVegetable: '1',
        signedDates: ['2018-07-24', '2018-07-23'],
        isSigned: false,
        isSigning: false
      }
    },
    methods: {
      enterPage({path: path, actionSheet: actionSheet}) {
        if (actionSheet) {
          this.actionSheetVisible = false
        }
        this.$router.push({
          path: path
        });
      },
      selectSign(signInfo) {
        /* signInfo.status 判断签到是否为当天
          *  signInfo.msg 本次是否签到成功的提示语
          *  signInfo.signedDates 本次签到后目前所有已签到的日期集合
          */
        if (signInfo.status) {
          this.isSigning = true
          // 模拟发送签到请求
          setTimeout(() => {
            this.isSigning = false
            // 模拟请求成功状态值
            let responseDataStatus = true // true为成功，false为失败（具体看接口）
            let responseDataMsg = '签到失败，请重试~'
            if (responseDataStatus) {
              // 改变签到状态
              this.isSigned = true

              // 提示签到成功，可以通过signSuccessTxt属性设置
              alert(signInfo.msg)

              // 更新已签到日期
              this.signedDates = signInfo.signedDates
            } else {
              alert(responseDataMsg)
            }
          }, 1000)
        } else {
          /* 需要在当天才能签到的提示，有如下三个属性可设置提示内容
           * notSignInOtherMonthsTxt，签到时点击本月外日期时的文本提示，默认值为“不能在本月外进行签到”
           * notSignInOtherDaysTxt，签到时点击本月内非当天日期时的文本提示，默认值为“notSignInOtherDaysTxt”
           * alreadySignTxt，签到时点击已经签过到的日期时的文本提示，默认值为“本日已经进行过签到”
           */
          alert(signInfo.msg)
        }
      },
      sign() {
        this.$refs.calendar.sign()
      }
    },
    mounted() {
      let select = this.$route.params.select;
      if (select == 1) {
        this.selectToPageEditor = true;
      }
    }
  }
</script>

<style scoped lang="less">
  @import "../../assets/less/consumer/sign-in.less";
</style>
